<template>
	<main-content>
		<z-paging ref="paging" v-model="listData" @query="getList" @loadingStatusChange='nextPage'>
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="p-16">
					<view class="">
						<u-search placeholder="请输入代理商名称" :clearabled='true' v-model="queryForm.agentNameLeftLike"
							:show-action="false" shape='square' @input="onSearch"></u-search>
					</view>
				</view>
			</template>
			<view class="flex flex-col"> <!-- style="height: 100vh;" -->
				<view class="content-color grow p-y-16" v-if="total > 0">
					<view class="my-card-border" v-for="(item,index) in listData" :item='item.id'>
						<u-card :head-border-bottom='false' :show-foot='false' margin='0rpx 30rpx 16rpx'>
							<template #head>
								<view class="flex flex-row justify-between">
									<group-title>
										<template #icon>
											<view class="main-color">
												<u-icon name="title-icon" custom-prefix="custom-icon" />
											</view>
										</template>
										{{item.name}}</group-title>
									<view class="">
										{{item.id}}
									</view>
								</view>
							</template>
							<template #body>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										总商户数量
									</view>
									<view class="list-value">
										{{ item.merchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										进件审核中商户数
									</view>
									<view class="list-value">
										{{item.registerMerchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										进件审核通过商户数
									</view>
									<view class="list-value">
										{{item.registerPassMerchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										交易商户
										<u-icon name="question-circle-fill"
											@click="showTipFn('交易商户判断：支付成功的交易笔数大于等于1笔的商户')"></u-icon>
									</view>
									<view class="list-value">
										{{item.tradeMerchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										活跃商户
										<u-icon name="question-circle-fill"
											@click="showTipFn('活跃商户判断：最近7天日均交易金额≥10元')"></u-icon>
									</view>
									<view class="list-value">
										{{item.activeMerchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										流失商户
										<u-icon name="question-circle-fill"
											@click="showTipFn('流失商户判断：最近7天日均交易为0')"></u-icon>
									</view>
									<view class="list-value">
										{{item.flowMerchantCount}}户
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										商户状态
									</view>
									<view class="list-value">
										{{selectDictLabel(AGENT_STATUS,item.status)}}
									</view>
								</view>
							</template>
						</u-card>
					</view>
				</view>
			</view>
		</z-paging>
		<u-popup v-model="showTip" mode="center" width="500rpx" border-radius="14" :closeable='true'>
			<view>
				<view class="p-14">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						提示</group-title>

				</view>
				<view class="p-16">
					{{tipContent}}
				</view>
				<view class="p-16">
					<u-button type="primary" @click="showTip=false">确认</u-button>
				</view>
			</view>
		</u-popup>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		AGENT_STATUS
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel
	} from '@/common/common.js'
	import {
		agentApi
	} from '@/pages-menus/common/api/agent/index.js'
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const initForm = {
		agentNameLeftLike: undefined, //代理商名称
		status: -1,
		exhibitionId: undefined, //业务员ID
		pageNo: 1,
		pageSize: 10,
	}
	const queryForm = ref({
		...initForm
	})
	const onSearch = (value) => {
		paging.value.reload()
	}

	const paging = ref(null)

	const total = ref(0)
	const listData = ref()

	const getList = async (pageNo, pageSize, ) => {
		queryForm.value.pageNo = pageNo ?? 1
		queryForm.value.pageSize = pageSize ?? 10
		let res = await agentApi.pageByExhibition(queryForm.value)
		// listData.value = res.data
		total.value = res.total
		paging.value.complete(res.data);
	}

	const scrollTop = ref(0)
	// 重置查询条件
	function resetQuery() {
		total.value = 0
		scrollTop.value = 0
		queryForm.value = {
			...initForm
		}
	}

	// 下拉刷新被触发
	const onRefresh = () => {
		// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
		paging.value.complete();
	}

	// 底部状态
	const moreStatus = ref('loading')
	// 下一页
	const nextPage = (val) => {
		console.log('val', val);
		moreStatus.value = val
	}

	const showTip = ref(false)
	const tipContent = ref('')
	const showTipFn = (val = '') => {
		showTip.value = true
		tipContent.value = val
	}

	onLoad(async (options) => {
		console.log('options==>', options);
		queryForm.value.exhibitionId = options?.exhibitionId ?? undefined
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style lang='scss' scoped>
	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	:deep(.zp-paging-container) {
		background-color: #F6F7F9;
	}

	:deep(.u-card .u-card__head) {
		padding: 15px 15px 0 15px !important;
	}
</style>